<template>
    <div>
         

            <!-- 商品卡片 -->
          
                
                        <van-swipe-cell  v-for="item in carlist" :key="item.id">
                        <div class="card-goods">
                            <van-checkbox  class="check" v-model="item.ischecked" > </van-checkbox>
                            <van-card
                                :num="item.number"
                                :price="item.retail_price"
                                :title="item.goods_name"
                                :thumb="item.list_pic_url"
                                />
                         </div>  
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
                                </template>
                        </van-swipe-cell>
                
          
                <!-- 提交订单栏 -->
                <van-submit-bar :price="priceall*100" button-text="提交订单" @submit="onSubmit" class="sub" >
                    <van-checkbox v-model="isAllChecked">全选</van-checkbox>
                </van-submit-bar>
                <div class="box">

                </div>
    </div>
</template>

<script>
import{goodslist , deleteAction } from "../../api/cart/index.js"
import { odersub } from "../../api/my/index.js"
import { mapState } from "../../store/index.js"
import { Toast } from 'vant';
    export default {
        data() {
            return {
                carlist:[],
                orderlist:[],

            }
        },
        methods:{
            onClickLeft(){
                    this.$router.go(-1)
            },
            onSubmit(){
                var openId = localStorage.getItem("openId")
                        console.log(this.carlist);
                        // 遍历购物车列表,将复选框==true的返回到orderlist新数组中
                    var orderlist = this.carlist.filter(el=>el.ischecked==true)
                    if(orderlist.length==0){
                            Toast('请先选择商品');
                    }else {
                        // 获取商品id
                     var orderlistid = orderlist.map(el=>el.goods_id)
                    //  将商品id转换为字符串
                        var stringid =  orderlistid.join(",")
                        odersub({
                            allPrise:this.priceall,
                            goodsId:stringid,
                            openId:openId
                        }).then(res=>{
                            console.log(res);
                            if(res.data==true){
                                this.$router.push({path:"/order"})
                            }else{
                                return
                            }
                        })
                         }
            },
           
            del(item){
                deleteAction({
                    id:item.id
                }).then(res=>{
                   this.$router.go(0)
                })
            }
        },
        created(){
            var openId = localStorage.getItem("openId")
           
                goodslist({
                    openId:openId
                }).then(res=>{
                    console.log(res);
                    console.log(openId);
                     res.data.forEach(el =>el.ischecked = false);
                    this.carlist.push(...res.data) 
                  
                    
                })
        },
        computed:{
            isAllChecked:{
                get(){
                    if(this.carlist.length == 0){
                        return false
                    }else{
                        return this.carlist.every(ele => ele.ischecked)
                    }
                    
                },
                set(val){
                    this.carlist.forEach(ele =>{
                        ele.ischecked = val;
                    })
                    
                }
            },
            priceall(){
                  return this.carlist.reduce((total,current)=>{
                        if(current.ischecked ){
                            return total+ current.number*current.retail_price
                        }else{
                            return total
                        }
                    },0)
            }

                
          
            
     
                
            
        }

    }
</script>

<style lang="scss" scoped>
         .goods-card {
                margin: 0;
                background-color: white;
            }

            .delete-button {
                height: 100%;
            }
            .van-swipe-cell  {
                margin-top: 8px;;
            }
        .card-goods {
           display: flex;
           justify-content: space-between;
           background-color: #fafafa;
           
        // .check {
        //     width: 30px;
        //     height: 30px;
        // }
        }
        .van-card {
            width: 90%;
        }
        .sub {
            margin-bottom: 50px;
        }
        .box {
            width: 100%;
            margin-bottom: 50px;
        }
        .check,.van-checkbox {
                margin-left: 15px;
        }
</style>